<template>
  <div class="nine_grid">
    <div class="warn-box">
      <svg-icon style="margin-right:17px" icon-class="warn" :size="20" />
      <p><span>图片要求！</span><br />图片尺寸请采用1:1，例如100*100px</p>
    </div>
    <div class="item" v-for="(item, index) in iconList" :key="index">
      <icon-form :item-index="index" :form-data="item" @upSortItem="upSortItem(index)"
        @downSortItem="downSortItem(index)">
      </icon-form>
    </div>
  </div>
</template>

<script>
import iconForm from "../components/iconForm";
export default {
  components: { iconForm },
  data() {
    return {
      iconList: []
    }
  },
  mounted() {
    this.init();
  },
  methods: {
    // 升序
    upSortItem(index) {
      if (index === 0) return;

      let item = this.iconList[index];
      this.$set(this.iconList, index, this.iconList[index - 1]);
      this.$set(this.iconList, index - 1, item);
    },
    // 降序
    downSortItem(index) {
      if (index === this.iconList.length - 1) return;

      const item = this.iconList[index];
      this.$set(this.iconList, index, this.iconList[index + 1]);
      this.$set(this.iconList, index + 1, item);
    },
    init() {
      for (let i = 0; i < 10; i++) {//10
        this.iconList.push({
          img: '',
          title: '',
          jumpUrl: ''
        });
      }
      console.log(this.iconList);
    }
  }
}
</script>

<style lang="scss" scoped></style>
